<script>
import { reactive, ref, toRefs } from '@vue/reactivity';
import {useRouter,useRoute} from 'vue-router'
import { getJsonshopEvaluate } from "../api/shopEvaluate.js";
import { useStore } from '../store/index.js';
    export default {
        setup() {
            let router=useRouter()
            let route=useRoute()
            let dataFun=reactive({
                mycomment:null,
                shopid:null,
            })
            let store=useStore()
            let evaluateList=ref(null)
            

            let back=()=>{
                router.go(-1)
            }

            getJsonshopEvaluate().then(data=>{
                evaluateList.value=data.data
            })
            function getData(){
                dataFun.shopid=route.query.shopid
                dataFun.mycomment=store.mycomment.filter(item=>{
                    return item.shopid==dataFun.shopid
                })
            }
            getData()
            
            return {
                ...toRefs(dataFun),
                back,
                evaluateList,
            }
        },
    }
</script>


<template>
    <div class="moreComment">
        <div class="wrapper">
            <div class="header">
                <div class="header_left icon_coo icon-a-ziyuan558" @click="back"></div>
                <div class="header_title">评价晒单</div>
            </div>

             <div class="evaluate">
                <ul>
                    <li v-for="(item,index) in mycomment" :key="index">
                        <div class="eva_top">
                            <div class="eva_topleft">
                                <div class="img">
                                    <img src="../assets/imgs/rose.webp" alt="">
                                </div>
                                <div class="name">23uyy</div>
                            </div>
                            <div class="eva_topright">好评</div>
                        </div>
                        <div class="comment">{{item.text}}</div>
                        <div class="eva_bottom">
                            <div class="eva_bottomimg" v-for="(e,ind) in item.fileList" :key="ind">
                                <img :src="e.content" alt="">
                            </div>
                        </div>
                    </li>
                </ul>
            </div>

            <div class="evaluate">
                <ul>
                    <li v-for="(item,index) in evaluateList" :key="index">
                        <div class="eva_top">
                            <div class="eva_topleft">
                                <div class="img">
                                    <img :src="item.headportrait" alt="">
                                </div>
                                <div class="name">{{item.name}}</div>
                            </div>
                            <div class="eva_topright">好评</div>
                        </div>
                        <div class="comment">{{item.comment}}</div>
                        <div class="eva_bottom">
                            <div class="eva_bottomimg" v-for="(e,ind) in item.url" :key="ind">
                                <img :src="e" alt="">
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>


<style lang="scss" scoped>
.moreComment{
    .wrapper{
        .header{
            position: fixed;
            left: 0;
            top: 0;
            background-color: #fff;
            z-index: 1;
            width: 100%;
            // padding: 0 12px;
            height: 50px;
            border-bottom: 1px solid rgb(249, 232, 197);
            display: flex;
            align-items: center;
            
            .header_left{
                font-size: 18px;
                padding-left: 16px;
            }
            .header_title{
                font-weight: 600;
                font-size: 18px;
                padding-left: 30px;
            }
            
        }
         .evaluate{
            margin-top: 55px;
            ul{
                li{
                    padding:  20px 16px;
                    .eva_top{
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        .eva_topleft{
                            display: flex;
                            align-items: center;
                            .img{
                                width: 26px;
                                height: 26px;
                                img{
                                    border-radius: 50%;
                                    width: 100%;
                                    height: 100%;
                                }
                            }
                            .name{
                                font-size: 11px;
                                padding:0 4px 0 8px ;
                            }
                            .rank{
                                font-size: 10px;
                                transform: scale(0.8);
                                color: #c79e2d;
                                font-weight: 600;
                            }
                        }
                        .eva_topright{
                            color: #ff9728;
                            font-size: 12px;
                        }
                    }
                    .comment{
                        padding: 14px 0;
                    }
                    .eva_bottom{
                        display: flex;
                        // justify-content: space-between;
                        flex-wrap: wrap;
                        .eva_bottomimg{
                            // width: 25%;
                            margin-right: calc((351px - 82px * 4)/3);
                            img{
                                width: 82px;
                                height: 82px;
                                margin-bottom: 10px;
                            }
                            &:nth-child(4n+4){
                                margin-right: 0;
                            }
                        }
                    }
                }
            }
        }
    }
}
</style>